<template>
	<view class="container">
		<view class="container__head">
			<view class="container__head--item" @click="menuClick(item,index)" v-for="(item,index) in menu">
				<view class="container__head--item-text" v-if="index != 2">{{item.text}}</view>
				<view class="container__head--item-text3" v-else>
					<view class="" v-if="!startDateTime && !endDateTime" style="text-align: center;color: #aaa;">时间</view>
					<view class="container__head--item-text3-des" v-else>
						<view class="container__head--item-text3-des-start" v-if="startDateTime">{{startDateTime}}起</view>
						<view class="container__head--item-text3-des-end" v-if="endDateTime">{{endDateTime}}止</view>
					</view>
				</view>
				<view class="container__head--item-icon">
					<u-icon :name="item.iconName" color="#aaa" size="15"></u-icon>
				</view>
			</view>
			<view class="container__head--item" @click="menu4Click">
				<view class="container__head--item-text">{{sortText}}</view>
				<view class="container__head--item-icon">
					<u-icon name="../../../../static/theme/default/home/sort.png" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="container__list">
			<z-paging ref="paging" class="z-paging" v-model="list" @query="queryList">
				<view class="container__list--item" v-for="(item,index) in list" :key="item.InsFlowId" @click="goProcessDetail(item)">
					<view class="container__list--item-title">
						<view class="container__list--item-title-text">{{item.FlowName}}</view>
						<view class="container__list--item-title-time">{{item.time}}</view>
					</view>
					<view class="container__list--item-content">{{item.FlowBrief.replace(/\|/g,'\n')}}</view>
					<view class="container__list--item-info">
						<view class="container__list--item-info-left">
							<view class="container__list--item-info-left-avator">
								<avator :avator="item.avator" :name="item.CreateUser"></avator>
							</view>
							<view class="">由{{item.CreateUser}}提交</view>
						</view>
						<view class="container__list--item-info-status" :style="{color: item.statusColor}" v-if="item.statusText">{{item.statusText}}</view>
						<view class="container__list--item-info-status1" v-if="item.CurrentUser">{{item.CurrentUser}}处理中</view>
					</view>
					<view class="container__list--item-spend" v-if="item.SpendTime">
						<text>耗时：</text>
						<text style="color: red;font-size: 25rpx;">{{item.SpendTime}}</text>
					</view>
				</view>
			</z-paging>
		</view>
		
		<!-- 下拉弹窗 -->
		<u-popup 
			:customStyle="popStyle" 
			mode="top" 
			round="10" 
			:show="categoryVisible" 
			@close="categoryVisible = false,menu[index].iconName='arrow-down-fill'" 
			@open="categoryVisible = true"
		>
			<view class="container__category-pop">
				<view class="container__category-pop-item1" v-show="index == 0">
					<view class="container__category-pop-item1-left">
						<view class="container__category-pop-item1-left-item" 
						:style="{'background-color': typeFirstIndex == i ? '#eee' : ''}" 
						v-for="(v,i) in flowTypeList" 
						:key="v.Id"
						@click="typeFirstIndex = i,typeSecondIndex = 0">
							{{v.TypeName}}
						</view>
					</view>
					<view class="container__category-pop-item1-right" v-if="flowTypeList.length">
						<view class="" style="height: 100%;">
							<view class="container__category-pop-item1-right-item"
							 :style="{'background-color': typeSecondIndex == i ? '#eee' : ''}" 
							 v-for="(v,i) in flowTypeList[typeFirstIndex].children"
							 :key="v.Id"
							 @click="menuChildClick1(v,i)"
							>
								{{v.TypeName}}
							</view>
						</view>
					</view>
				</view>
				<view class="container__category-pop-item2" v-show="index == 1">
					<view class="container__category-pop-item2-item" :class="statusIndex == 0 ? 'status-active' : ''" @click="menuChildClick2('待处理',0)">待处理</view>
					<view class="container__category-pop-item2-item" :class="statusIndex == 1 ? 'status-active' : ''" @click="menuChildClick2('我参与的',1)">我参与的</view>
					<view class="container__category-pop-item2-item" :class="statusIndex == 2 ? 'status-active' : ''" @click="menuChildClick2('我发起的',2)">我发起的</view>
					<view class="container__category-pop-item2-line" ></view>
					<view class="container__category-pop-item2-item" :class="statusIndex == 3 ? 'status-active' : ''" @click="menuChildClick2('已完成',3)">已完成</view>
					<view class="container__category-pop-item2-item" :class="statusIndex == 4 ? 'status-active' : ''" @click="menuChildClick2('抄送我的',4)">抄送我的</view>
				</view>
				<view class="container__category-pop-item3" v-show="index == 2">
					<view class="" style="color: orange;margin-right: 10rpx;" @click="startDateTime=startDate='',endDateTime=endDate='',initPage(),getFlowData()">重置</view>
					<view class="container__category-pop-item3-time">
						<view style="font-size: 27rpx;">开始：</view>
						<view class="container__category-pop-item3-time-text" @click="calendarEndVisible = false,calendarStartVisible = true">{{startDate}}</view>
					</view>
					<view class="container__category-pop-item3-time">
						<view style="font-size: 27rpx;">结束：</view>
						<view class="container__category-pop-item3-time-text" @click="calendarStartVisible = false,calendarEndVisible = true">{{endDate}}</view>
					</view>
					<view class="container__category-pop-item3-btn">
						<view class="" style="color: #2979ff;" @click="initPage(),getFlowData(),startDateTime=startDate,endDateTime=endDate">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 日期选择组件 -->
		<u-datetime-picker :closeOnClickOverlay="true" :show="calendarStartVisible" mode="date" :value="starttime" @confirm="confirmStartDate" @close="calendarStartVisible = false" @cancel="calendarStartVisible = false"></u-datetime-picker>
		<u-datetime-picker :closeOnClickOverlay="true" :show="calendarEndVisible" mode="date" :value="endtime" @confirm="confirmEndDate" @close="calendarEndVisible = false" @cancel="calendarEndVisible = false"></u-datetime-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Avator from '@/components/custom/avator/avator.vue'
	import {arrayToTree,formatTime} from '@/common/custom_util.js'
	import moment from 'moment'
	
	let isInit = false;
	export default {
		components: {
			Avator
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_avator: _data.data('static_url'),
				menu: [
					{
						text: '全部分类',
						iconName: 'arrow-down-fill',
					},
					{
						text: '待处理',
						iconName: 'arrow-down-fill',
					},
					{
						text: '时间',
						iconName: 'arrow-down-fill',
					},
				],
				list: [],
				categoryVisible: false,
				index: -1,//顶部菜单当前索引
				typeFirstIndex: 0,//第一个菜单左边选中的索引
				typeSecondIndex: 0,//第一个菜单右边选中的索引
				statusIndex: 0,//第二个菜单下的列表选择索引
				flowTypeList: [],//流程类型列表
				list: [],//待办列表
				typecode: '',
				timesort: 'desc',//排序，desc：倒序，asc：正序
				sortText: '倒序',
				currentpage: 1,
				pagesize: 10,
				starttime: moment().format('YYYY-MM-DD'),
				endtime: moment().format('YYYY-MM-DD'),
				startDate: '',
				endDate: '',
				startDateTime: '',
				endDateTime: '',
				calendarStartVisible: false,
				calendarEndVisible: false,
			}
		},
		onLoad() {
			this.getFlowTypeList();
		},
		onShow() {
			//跳转页面回来刷新用，首次进入会和queryList重复执行,跳过
			if(isInit) {
				this.getFlowData()
			}
			isInit = true;
		},
		computed: {
			popStyle() {
				// #ifdef APP-PLUS
				return {'top': '100rpx'}
				// #endif
				// #ifdef H5
				return {'top': '189rpx'}
				// #endif
			},
			dateDes() {
				if(this.startDate && this.endDate) {
					return this.startDate + '至' + this.endDate
				} else if(this.startDate && !this.endDate) {
					return this.startDate + '至今'
				} else if(!this.startDate && this.endDate){
					return this.endDate + '及以前'
				}
			}
		},
		methods: {
			/**
			 * 初始化分页参数
			 */
			initPage() {
				this.pagesize = 10;
				this.currentpage = 1;
				this.$refs.paging.reload();
			},
			/**
			 * 点击顶部菜单
			 * @param {Object} v 当前点击的对象
			 * @param {Object} i 当前点击对象的索引
			 */
			menuClick(v,i) {
				this.menu.forEach(item => {
					item.iconName = 'arrow-down-fill';
				})
				if(this.index == i && this.categoryVisible) {
					this.categoryVisible = false;
					return
				}
				v.iconName = 'arrow-up-fill';
				this.categoryVisible = true;
				this.index = i;
			},
			/**
			 * 获取流程类型列表
			 */
			getFlowTypeList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getFlowTypeList',
					success(res) {
						let tree = arrayToTree(res,'Id','Pid','-1');
						that.flowTypeList = tree.length ? tree[0].children : [];
						that.typeode = that.flowTypeList.length && that.flowTypeList[0].children.length ? that.flowTypeList[0].children[0].TypeCode : '';
					}
				})
			},
			/**
			 * 获取列表数据
			 */
			getFlowList(v) {
				let that = this;
				_custom.getDataJava({
					apiname: v,
					pagesize: this.pagesize,
					currentpage: this.currentpage,
					apiparam: {
						typecode: this.typecode,
						obsusername: this.obsusername,
						pxid: this.pxid,
						timesort: this.timesort,
						starttime: this.startDate,
						endtime: this.endDate,
					},
					success(res) {
						res.forEach(item => {
							that.setPorcessStatus(item)
						})
						that.$refs.paging.complete(that.formatFlowList(res));
					}
				})
			},
			/**
			 * 点击第一个菜单下列表
			 * @param {Object} i  索引
			 */
			menuChildClick1(v,i) {
				this.typeSecondIndex = i;
				this.typecode = v.TypeCode;
				this.menu[0].text = v.TypeName;
				this.initPage()
				this.getFlowData()
			},
			/**
			 * 点击第二个菜单下列表
			 * @param {Object} i  索引
			 */
			menuChildClick2(v,i) {
				this.statusIndex = i;
				this.menu[1].text = v;
				this.initPage()
				this.getFlowData();
			},
			/**
			 * 处理返回的列表数据
			 * @param {Object} v 列表数据
			 */
			formatFlowList(v) {
				v.forEach(item => {
					item.avator = this.static_avator + "/static/photo/user/" + item.CreatePxid + "/70.jpg";
					item.time = moment(item.CreateTime).format('YYYY-MM-DD');
					item.SpendTime = item.SpendMinutes ? formatTime(item.SpendMinutes) : '';
				})
				return v
			},
			/**
			 * 获取中间的列表数据
			 */
			getFlowData() {
				switch(this.statusIndex) {
					case 0://获取待办列表
						this.getFlowList('getFlowMyToDoList');
						break;
					case 1://获取我发起的流程
						this.getFlowList('getFlowMyJoinList');
						break;
					case 2://获取我参与的流程
						this.getFlowList('getFlowMyCreateList');
						break;
					case 3://获取完成的流程
						this.getFlowList('getFlowMyFinishList');
						break;
					case 4://获取抄送我的流程
						this.getFlowList('getFlowMyCopyList');
						break;
				}
				this.menu.forEach(item => {
					item.iconName = 'arrow-down-fill';
				})
				this.categoryVisible = false;
			},
			/**
			 * 分页请求的方法(初始化会执行，相当于写在onload中)
			 * @param {Object} pageNo	当前页码
			 * @param {Object} pageSize		每页数量
			 */
			queryList(pageNo, pageSize) {
				this.pagesize = pageSize;
				this.currentpage = pageNo;
				this.getFlowData()
			},
			/**
			 * 点击开始时间选择器确认按钮事件
			 * @param {Object} v  回调参数
			 */
			confirmStartDate(v) {
				this.starttime = moment(v.value).format('YYYY-MM-DD');
				this.startDate = moment(v.value).format('YYYY-MM-DD');
				this.calendarStartVisible = false;
			},
			/**
			 * 点击结束时间选择器确认按钮事件
			 * @param {Object} v  回调参数
			 */
			confirmEndDate(v) {
				this.endtime = moment(v.value).format('YYYY-MM-DD');
				this.endDate = moment(v.value).format('YYYY-MM-DD');
				this.calendarEndVisible = false;
			},
			/**
			 * 切换倒序正序
			 */
			menu4Click() {
				this.timesort = this.timesort == 'desc' ? 'asc' : 'desc';
				this.sortText = this.timesort == 'desc' ? '倒序' : '正序';
				this.initPage()
				this.getFlowData();
			},
			/**
			 * 跳转到流程详情页面
			 * @param {Object} v  当前流程数据
			 */
			goProcessDetail(v) {
				console.log(v)
				uni.navigateTo({
					url: '../' + v.FlowRouter + '/index?data=' + JSON.stringify(v)
				})
			},
			/**
			 * 设置流程状态
			 */
			setPorcessStatus(v) {
				switch(v.FlowState) {
					case '1':
						v.statusText = '审批通过';
						v.statusColor = '#19be6b';
						break;
					case '-1':
						v.statusText = '审批拒绝';
						v.statusColor = '#fa3534';
						break;
					case '-3':
						v.statusText = '已撤回';
						v.statusColor = '#aaa';
						break;
					case '-4':
						v.statusText = '已撤销';
						v.statusColor = '#aaa';
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 100rpx;
		
		&__head {
			position: fixed;
			top: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			border-bottom: 3rpx solid #eee;
			box-sizing: border-box;
			z-index: 999999;
			
			&--item {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				
				&-icon {
					margin-left: 10rpx;
				}
				
				&-text {
					font-size: 28rpx;
					color: #999;
				}
				
				&-text3 {
					
					&-des {
						
						&-start,&-end {
							font-size: 24rpx;
							color: #aaa;
							white-space: nowrap;
						}
					}
				}
			}
		}
		
		&__list {
			
			&--item {
				margin: 25rpx 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				
				&-title {
					display: flex;
					height: 100rpx;
					display: flex;
					align-items: center;
					
					&-text {
						font-size: 33rpx;
						font-weight: bold;
						flex: 4;
					}
					
					&-time {
						font-size: 25rpx;
						color: #aaa;
					}
				}
				
				&-content {
					line-height: 40rpx;
					color: #aaa;
					white-space: pre-wrap;
				}
				
				&-info {
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					
					&-left {
						height: 100%;
						display: flex;
						align-items: center;
						
						&-avator {
							width: 60rpx;
							height: 60rpx;
							margin-right: 10rpx;
						}
						
					}
					
					&-status {
						color: orange;
						font-size: 25rpx;
						padding: 10rpx;
						background-color: rgba(230,244,241,.3);
						border: 1rpx solid #eee;
						border-radius: 10rpx;
					}
					
					&-status1 {
						color: orange;
						font-size: 25rpx;
					}
				}
				
				&-spend {
					margin-top: 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-top: 1rpx solid #eee;
				}
			}
		}
		
		&__category-pop {
			
			&-item1 {
				display: flex;
				
				&-left {
					flex: 1;
					border-right: 1rpx solid #eee;
					padding: 20rpx;
					
					&-item {
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}
				
				
				&-right {
					flex: 2;
					padding: 20rpx;
					
					&-item {
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}
			}
			
			&-item2 {
				padding: 20rpx;
				
				&-line {
					height: 1rpx;
					background-color: #eee;
					margin: 10rpx 0;
				}
				
				&-item {
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					border-radius: 10rpx;
				}
			}
			
			&-item3 {
				padding: 20rpx;
				display: flex;
				align-items: center;
				height: 60rpx; 
				
				&-time {
					flex: 1;
					justify-content: center;
					display: flex;
					
					&-text {
						width: 160rpx;
						border-bottom: 1rpx solid #eee;
					}
				}
				
				&-btn {
					display: flex;
					align-items: center;
				}
			}
		}
	}
	
	.status-active {
		background-color: #eee;
	}
	
	.z-paging {
		margin-top: 100rpx;
	}
</style>
